<script lang="ts">
import Countdown from '~/pages/promo/pack/components/Countdown.vue';

export const bonuses = useAntdModal(
  // eslint-disable-next-line import/no-self-import
  defineAsyncComponent(() => import('./index.vue')),
  {
    title: computed(() => $t('lg5Ymu3wZt0qMxVvxZoZ')),
    wrapClassName: 'ant-cover__Modal-drawer',
    footer: null,
  },
);
</script>

<script setup lang="ts">
const authed = useAuthed();
const currencyStore = useCurrencyStore();
const isFiat = computed(() => currencyStore.fiatList?.findIndex(item => item.currency === currencyStore.cryptoName) !== -1);
const route = useRoute();
const rakeDetail = useAntdModal(
  defineAsyncComponent(() => import('./RakebackDetail.vue')),
  {
    title: computed(() => $t('e1QCiWLxXcGqes7Lj4Hqn')),
    wrapClassName: 'ant-cover__Modal-drawer',
    centered: true,
    footer: null,
  },
);

const cashDetail = useAntdModal(
  defineAsyncComponent(() => import('./CashbackDetail.vue')),
  {
    title: computed(() => $t('e1QCiWLxXcGqes7Lj4Hqn')),
    wrapClassName: 'ant-cover__Modal-drawer __screen-drawer [--max-modal-height:800px]',
    centered: true,
    footer: null,
  },
);

const freeDetail = useAntdModal(
  defineAsyncComponent(() => import('./FreeDetail.vue')),
  {
    title: computed(() => $t('e1QCiWLxXcGqes7Lj4Hqn')),
    wrapClassName: 'ant-cover__Modal-drawer',
    centered: true,
    footer: null,
  },
);
const SignDetail = useAntdModal(
  defineAsyncComponent(() => import('./SignDetail.vue')),
  {
    title: computed(() => $t('e1QCiWLxXcGqes7Lj4Hqn')),
    wrapClassName: 'ant-cover__Modal-drawer',
    centered: true,
    footer: null,
  },
);

function open(com: 'withdraw' | 'wheel', data?: any) {
  if (com === 'withdraw') {
    const currency = data.bonuses_details && data.bonuses_details.map((c: any) => {
      return { symbol: c.currency, amount: bignumber(c.balance) };
    });
    globalPopups.claim.open({
      amount: Number(data?.amount),
      claimType: data.bonuses_type,
      currency,
    });
  }
  if (com === 'wheel')
    globalPopups.lottery?.open();
}

const bonusDetail = useAntdModal(
  defineAsyncComponent(() => import('./BonusDetail.vue')),
  {
    title: computed(() => $t('e1QCiWLxXcGqes7Lj4Hqn')),
    wrapClassName: 'ant-cover__Modal-drawer',
    centered: true,
    footer: null,
  },
);

const { bonuses, bonusesAvailableAt, bonusesQry } = queries.useBonusesQuery();
const invitedSpinStatus = ref(undefined);
function onCountDownFinish() {
  setTimeout(bonusesQry.refetch, 1500);
}

async function handleInvitedSpinLogic() {
  const res = await apis.apiActivityInviteReady({ undefined });
  invitedSpinStatus.value = res.status;
}

onMounted(() => {
  bonusesQry.refetch();
  handleInvitedSpinLogic();
});
</script>

<template>
  <div class="grid gap-2 text-white">
    <!-- 佣金返还 -->
    <div v-if="authed" class="bonus-item">
      <img src="../../assets/imgs/bonuses/rakeback.png" class="size-11">

      <div>
        <div>
          <span class="font-600">{{ $t('v7FZhX4Rp7gBDgtMbTu6m') }}</span>
          <span class="helptip" @click="rakeDetail.open()"><i /></span>
        </div>
        <div v-if="Number(bonuses?.rakeback?.amount)" class="text-xs text-green">
          <TAmount :value="bonuses?.rakeback?.amount" :decimals="2" symbol="$" format="fixed-dec" colored="full" iconPos="left" />
        </div>
      </div>

      <div class="right-div">
        <AButton
          v-if="bonuses?.rakeback?.available" class="ant-cover__Button-3d-primary avaliable-btn"
          type="primary" size="small" block @click="open('withdraw', bonuses?.rakeback)"
        >
          {{ $t('sx5fQf4CaYkEuTPtBdzg') }}
        </AButton>
        <div v-else class="unavaliable-btn">
          <AStatisticCountdown
            v-if="bonusesAvailableAt.rakeback "
            class="ant-cover__StatisticCountdown-inline-inherit"
            :value="bonusesAvailableAt.rakeback" @fnish="onCountDownFinish"
          />
          <span v-else @click="rakeDetail.open()">{{ $t('3rhpsyQm7rJVuUUarTtsg') }}</span>
        </div>
      </div>
    </div>

    <!-- 现金返还 -->
    <div v-if="authed" class="bonus-item">
      <img src="../../assets/imgs/bonuses/cashback.png" class="size-11">
      <div>
        <div>
          <span class="font-600">{{ $t('vwIm7RlsltxuHa5JwVxcO') }}</span>
          <span class="helptip" @click="cashDetail.open()"><i /></span>
        </div>
        <div v-if="Number(bonuses?.cashback?.amount)" class="text-xs text-green">
          <TAmount :value="bonuses?.cashback?.amount" :decimals="2" symbol="$" format="fixed-dec" colored="full" iconPos="left" />
        </div>
      </div>

      <div class="right-div">
        <AButton
          v-if="bonuses?.cashback?.available" class="ant-cover__Button-3d-primary avaliable-btn"
          type="primary" size="small" block @click="open('withdraw', bonuses?.cashback)"
        >
          {{ $t('sx5fQf4CaYkEuTPtBdzg') }}
        </AButton>
        <template v-else>
          <div v-if="bonusesAvailableAt.cashback" class="unavaliable-btn">
            <AStatisticCountdown

              class="ant-cover__StatisticCountdown-inline-inherit"
              :value="bonusesAvailableAt.cashback" @fnish.stop="onCountDownFinish"
            />
          </div>
          <div v-else class="unavaliable-btn" @click="cashDetail.open()">
            <span>{{ $t('3rhpsyQm7rJVuUUarTtsg') }}</span>
          </div>
        </template>
      </div>
    </div>

    <!-- 免费转盘 -->
    <div class="bonus-item">
      <i class="i-local:bonuses--wheel-icon text-10.5" />
      <div>
        <div>
          <span class="font-600">{{ $t('lx8Nn5Ks5trhmr0_0hTh') }}</span>
          <span class="helptip" @click="freeDetail.open()"><i /></span>
        </div>
        <div v-if="bonuses?.luckyspin?.available" class="text-xs text-green-4">
          {{ $t('zv1dIj3TEeePe8P21InL') }}
        </div>
        <div v-else class="text-xs text-sys-text-body">
          {{ $t('nufg0YypUhIiaWjQc9gT3', { time: Math.floor(((bonuses?.luckyspin?.period || 86400000) / (1000 * 60 * 60))) }) }}
        </div>
      </div>

      <div class="right-div">
        <AButton
          v-if="bonuses?.luckyspin?.available || !authed" class="ant-cover__Button-3d-green avaliable-btn"
          type="primary" size="small" block @click="open('wheel')"
        >
          {{ $t('vr5viGjzs4bMLeX_0IPe') }}
        </AButton>
        <div v-else class="unavaliable-btn" @click="freeDetail.open()">
          <AStatisticCountdown
            class="ant-cover__StatisticCountdown-inline-inherit"
            :value="bonusesAvailableAt.luckyspin" @fnish="onCountDownFinish"
          />
        </div>
      </div>
    </div>

    <!-- 等级 -->
    <div v-if="authed" class="bonus-item">
      <img src="../../assets/icons/bonuses/start.svg" class="size-11">

      <div>
        <div>
          <span class="font-600">{{ $t('td0nRGoBbJUiAlLGkm') }}</span>
          <span class="helptip" @click="globalPopups.rankPopup.open()"><i /></span>
        </div>
      </div>

      <div class="right-div">
        <AButton
          v-if="bonuses?.upgrade?.available" class="ant-cover__Button-3d-primary avaliable-btn"
          type="primary" size="small" block @click="globalPopups.rankPopup.open()"
        >
          {{ $t('sx5fQf4CaYkEuTPtBdzg') }}
        </AButton>
        <div v-else class="unavaliable-btn cursor-pointer" @click="globalPopups.rankPopup.open()">
          <span>{{ $t('3rhpsyQm7rJVuUUarTtsg') }}</span>
        </div>
      </div>
    </div>

    <!-- 活动 -->
    <div v-if="authed" class="bonus-item">
      <img src="../../assets/imgs/user/gift.png" class="size-11">

      <div>
        <div>
          <span class="font-600">{{ $t('iIzJUde7Mh4tRBeuKoh5c') }}</span>
          <span class="helptip" @click="bonusDetail.open()"><i /></span>
        </div>
        <div v-if="Number(bonuses?.bonus?.amount)" class="text-xs text-green">
          <TAmount :value="bonuses?.bonus?.amount!" :decimals="2" symbol="$" format="fixed-dec" colored="full" iconPos="left" />
        </div>
      </div>

      <div class="right-div">
        <AButton
          v-if="bonuses?.bonus?.available" class="ant-cover__Button-3d-primary avaliable-btn"
          type="primary" size="small" block @click="open('withdraw', bonuses?.bonus)"
        >
          {{ $t('sx5fQf4CaYkEuTPtBdzg') }}
        </AButton>
        <template v-else>
          <div v-if="bonusesAvailableAt.bonus" class="unavaliable-btn">
            <AStatisticCountdown
              class="ant-cover__StatisticCountdown-inline-inherit"
              :value="bonusesAvailableAt.bonus" @fnish="onCountDownFinish"
            />
          </div>
          <div v-else class="unavaliable-btn" @click="bonusDetail.open()">
            <span>{{ $t('3rhpsyQm7rJVuUUarTtsg') }}</span>
          </div>
        </template>
      </div>
    </div>

    <!-- 首登陆转盘奖励 -->
    <div v-if="Number(~~bonuses?.signup?.amount) && authed" class="bonus-item">
      <img src="../../assets/icons/presented.svg" class="size-11">

      <div>
        <div>
          <span class="font-600">{{ $t('rhW9VfhWmoQq2TlkbZeG') }}</span>
          <!-- <span class="helptip" @click="globalPopups.signUpBonusPopup.open()"><i /></span> -->
        </div>
        <div class="flex items-center gap-2 text-green">
          <div v-if="Number(bonuses?.signup?.amount) " class="flex-center">
            <TAmount v-if="isFiat" :value="currencyStore.convert('USD', (Number(bonuses?.signup?.amount) ?? 15), currencyStore.cryptoName)" :decimals="2" :symbol="(currencyStore.cryptoName === 'DIAMOND' ? 'USDT' : currencyStore.cryptoName)" format="fixed-dec" colored="inherit" iconPos="left" />
            <TAmount v-else :value="15" :decimals="2" symbol="USD" format="fixed-dec" colored="inherit" iconPos="left" />
          </div>
          <div class="">
            <Countdown v-if="bonusesAvailableAt.signup" :value="bonusesAvailableAt.signup" @finish="onCountDownFinish">
              <template #default="{ diff, formatText }">
                <span v-if="diff.d > 0">{{ formatText(diff.d, 'd ', false) }}</span>
                <span>{{ `${formatText(diff.h, ':')}${formatText(diff.m, ':')}${formatText(diff.s)}` }}</span>
              </template>
            </Countdown>
            <span v-else>{{ $t('3rhpsyQm7rJVuUUarTtsg') }}</span>
          </div>
        </div>
      </div>

      <div class="right-div">
        <AButton
          v-if="bonuses?.signup?.available" class="ant-cover__Button-3d-primary avaliable-btn"
          type="primary" size="small" block @click="globalPopups.wallet.open({ initTab: 'deposit', isDepositPage: true, checkedBonusKey: 'signUp' });"
        >
          {{ $t('sx5fQf4CaYkEuTPtBdzg') }}
        </AButton>
      </div>
    </div>

    <!-- 签到奖励 -->
    <div v-if="authed" class="bonus-item">
      <img src="../../assets/icons/pearls.svg" class="size-11">
      <div>
        <div>
          <span class="font-600">{{ $t('8I4T70r86CTlAefkgHlvY') }}</span>
          <span class="helptip" @click="SignDetail.open()"><i /></span>
        </div>
      </div>

      <div class="right-div">
        <AButton
          v-if="bonuses?.checkin?.available"
          class="ant-cover__Button-3d-primary avaliable-btn"
          type="primary"
          size="small"
          block
          @click="globalPopups.attendance?.open()"
        >
          {{ $t('7T1C7SoYhE55Ru9LNnf') }}
        </AButton>
        <div v-else class="unavaliable-btn" @click="SignDetail.open()">
          <span>{{ $t('ot8uawNmh6vD9uTqgaZdW', { day: bonuses?.checkin?.period }) }}</span>
        </div>
      </div>
    </div>

    <!-- 邀请好友转盘活动 -->
    <div v-if="invitedSpinStatus?.available || bonuses?.invitespin" class="bonus-item">
      <img src="../../assets/imgs/invitation-spin/icon.png" class="w-11 object-cover">
      <div>
        <div>
          <span>{{ $t('8bTEoKwiXlSkFoA18ObKi', { amount: invitedSpinStatus?.withdraw_amount, currency: invitedSpinStatus?.currency }) }}</span>
        </div>
        <div class="flex items-center gap-2 text-green">
          <div class="">
            <Countdown v-if="bonusesAvailableAt.invitespin" :value="bonusesAvailableAt.invitespin" @finish="onCountDownFinish">
              <template #default="{ diff, formatText }">
                <span v-if="diff.d > 0">{{ formatText(diff.d, 'd ', false) }}</span>
                <span>{{ `${formatText(diff.h, ':')}${formatText(diff.m, ':')}${formatText(diff.s)}` }}</span>
              </template>
            </Countdown>
          </div>
        </div>
      </div>

      <div class="right-div">
        <AButton
          v-if="true"
          type="primary"
          size="small"
          class="ant-cover__Button-3d-primary avaliable-btn"
          block
          @click="$router.push({ name: RN.INVITATION })"
        >
          {{ $t('0N4elRCsChlWxuBx5Fae') }}
        </AButton>
        <div v-else class="unavaliable-btn" @click="SignDetail.open()">
          <span>{{ $t('ot8uawNmh6vD9uTqgaZdW', { day: bonuses?.checkin?.period }) }}</span>
        </div>
      </div>
    </div>

    <rakeDetail.PresetComponent />
    <cashDetail.PresetComponent />
    <freeDetail.PresetComponent />
    <bonusDetail.PresetComponent />
    <SignDetail.PresetComponent />
  </div>
</template>

<style lang="scss" scoped>
// 一条奖励
.bonus-item {
  --uno: 'grid grid-cols-[auto_1fr_auto] items-center gap-2 rounded-2 bg-sys-layer-a p2';

  // 帮助按钮
  .helptip {
    --uno: 'ml-0 inline-block cursor-pointer p-1 -m-1';
    > i {
      --uno: 'i-ri:question-line text-1.2em text-gray';
    }
  }

  // 右边按钮
  .right-div {
    --uno: 'max-w-44 min-w-28';
  }

  // 可用按钮
  .avaliable-btn {
    --uno: 'h9';
  }

  // 不可用按钮
  .unavaliable-btn {
    --uno: 'h10 flex-center cursor-pointer font-600 border-(1 sys-layer-e solid) rounded-2 px-3 text-center text-sm text-sys-text-body';
  }
}
</style>
